---
title: "Accessibility Checker Rule Help: HAAC_Accesskey_NeedLabel"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

 * Blind people using screen readers
 * People who physically cannot use a pointing device
 * People with dexterity impairment using voice control

### Why is this important?

The label of an HTML element with an `accesskey` attribute allows the user agent to display a list of access keys with a name describing each access key’s function. It also allows voice control users to speak the label to activate its function.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### The HTML element with an assigned `accesskey` attribute does not have an associated label
An HTML element with an assigned `accesskey` attribute must have an associated label

[IBM 3.3.2 Labels and Instructions](http://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html)

<div id="locSnippet"></div>

### What to do

 * Provide a label using a `title` attribute (e.g. `<a title="Activities" accesskey="A" href="/Consortium/activities">Activities</a>`);
 * OR, use `<label for="">` or `aria-labelledby` to designate visible text as the label;
 * OR, use an input embedded in a `<label>` (e.g. `<label><input type="checkbox" accesskey="A"/>foo</label>`);
 * OR, if the element does not have a visible label, provide a label using the `aria-label` attribute (e.g. `aria-label="Activities"`).

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
